<template>
    <div>
        <ul class="m-6">
            <li v-for="topic in topics" class="p-6 rounded-lg border-2 border-solid border-slate-200">
                <NuxtLink :to="`/answer/${topic.id}`">
                    <p class="text-3xl">{{ topic.title }}</p>
                    <div class="flex align-center justify-between pt-4 mt-5 border-t text-slate-600">
                        <p><span>100分 共{{ topic.quantity }}题</span></p>
                        <p><span>答题限时 {{ topic.limit }} 秒</span></p>
                    </div>
                    <p class="mt-3 text-slate-600">参与时间：<span>{{ $dayjs(topic.createdAt).format('YYYY/MM/DD HH:mm') }} -
                            {{ $dayjs(topic.updatedAt).format('YYYY/MM/DD HH:mm') }}</span></p>
                </NuxtLink>
            </li>
        </ul>
    </div>
</template>

<script setup>
const params = reactive({
    page: 1,
    limit: 10,
})
const { data: topics } = await useFetch(`/api/topics`, { method: 'post', body: params });
</script>